<template>
    <div class="main">
    <!--操作栏  -->
    <div class="nav clear">
        <div class="btn">
            <el-row>
            <el-button type="success" icon="el-icon-plus" @click="add()">新增</el-button>
            <el-button type="primary" icon="el-icon-sort" @click="zhuanJiao()">转交</el-button>
            <el-button type="info" icon="el-icon-search" @click="gaoJiSearch()">高级搜索</el-button>
            <el-button type="success" icon="el-icon-document-delete" @click="daochu()">导出</el-button>
            </el-row>
        </div>
        <div class="search">
            <el-input v-model="search" placeholder="请输入内容"></el-input>
            <el-button class="el-icon-search" @click="moHuSearch()"></el-button>
        </div>
    </div>
    <!-- 表格 -->
    <div>
        <template>
            <el-table tooltip-effect="dark" :data="tableData" border style="width: 100%"  @selection-change="handleSelectionChange">
                <el-table-column
                type="selection"
                width="50">
                </el-table-column>
                <el-table-column
                prop="typesCustomer.title"
                label="类型"
                width="80">
                </el-table-column>
                <el-table-column
                prop="username"
                label="患者名称"
                width="100">
                </el-table-column>
                <el-table-column
                prop="sex"
                label="性别"
                width="50">
                 <template slot-scope="scope">
                    <span v-if="scope.row.sex == 1">男</span>
                    <span v-if="scope.row.sex == 2">女</span>
                </template>  
                </el-table-column>
                <el-table-column
                prop="age"
                label="年龄"
                width="50">
                </el-table-column>
                <el-table-column
                prop="phoneNumber"
                label="手机号码"
                width="120">
                </el-table-column>
                <el-table-column
                prop="customerCard"
                label="身份证号"
                width="200">
                </el-table-column>
                <el-table-column
                prop="medicalInsurance"
                label="医保卡号"
                width="200">
                </el-table-column>
                <el-table-column
                prop="customerLocation.province"
                label="省"
                width="80">
                </el-table-column>
                <el-table-column
                prop="customerLocation.city"
                label="市"
                width="80">
                </el-table-column>
                <el-table-column
                prop="customerLocation.address"
                label="地址"
                width="150">
                </el-table-column>
                <el-table-column
                prop="employee.realName"
                label="负责人"
                width="80">
                </el-table-column>
                <el-table-column
                prop="createTime"
                label="创建时间"
                width="180">
                    <template slot-scope="scope">{{scope.row.createTime|dateFormat}}</template>
                </el-table-column>
                <el-table-column
                prop="statusCustomer.title"
                label="状态"
                width="80">
                </el-table-column>
                <el-table-column
                label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" icon="el-icon-edit-outline" @click="modify(scope)">修改</el-button>
                    <el-button type="success" icon="el-icon-plus" @click="kaiDan">开单</el-button>
                    <el-button type="danger" icon="el-icon-close" @click="open(scope)">删除</el-button>
                </template>   
                </el-table-column>
            </el-table>
        </template> 
    </div>
    <!-- 页码内容 -->
    <div class="pages clear">
        <div class="leftPage">
            <span>共 <b>{{this.maxCount}}</b> 条 | 每页 <b>{{this.obj.limit}}</b> 条 | 共 <b>{{this.maxPage}}</b> 页</span>
        </div>
        <div class="rightPage">
            <el-pagination
            background
            layout="prev, pager, next"
            :page-count='maxPage'
            :current-page='nowPage'
            @current-change='changePage'
            >
            </el-pagination>
        </div>
    </div>
    <!-- 高级搜索弹框 -->
    <div class="searchForm">
        <el-dialog :visible.sync="dialogFormVisible">
            <el-form :model="searchForm">
                <el-form-item label="类型" :label-width="formLabelWidth">
                    <el-select v-model="searchForm.types" placeholder="请选择类型">
                        <el-option v-for="item in typeSea" :key="item.id" :label="item.title" :value="item.title"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth"> 
                    <el-select v-model="searchForm.status" placeholder="请选择状态">
                        <el-option v-for="item in status" :key="item.id" :label="item.title" :value="item.title"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="患者名称" :label-width="formLabelWidth">
                    <el-input v-model="searchForm.username"></el-input>
                </el-form-item>
                <el-form-item label="手机号" :label-width="formLabelWidth">
                    <el-input v-model="searchForm.customerPhoneNumber"></el-input>
                </el-form-item>
                <el-form-item label="身份证号" :label-width="formLabelWidth">
                    <el-input v-model="searchForm.customerCard"></el-input>
                </el-form-item>
                <el-form-item label="医保卡号" :label-width="formLabelWidth">
                    <el-input v-model="searchForm.medicalInsurance"></el-input>
                </el-form-item>
                <el-form-item label="时间起" :label-width="formLabelWidth">
                    <el-col :span="11">
                    <el-date-picker type="date" placeholder="选择起始日期" v-model="searchForm.startTime" style="width: 100%;"></el-date-picker>
                    </el-col>
                </el-form-item>
                <el-form-item label="时间止" :label-width="formLabelWidth">
                    <el-col :span="11">
                    <el-date-picker type="date" placeholder="选择终止日期" v-model="searchForm.endTime" style="width: 100%;"></el-date-picker>
                    </el-col>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="gaoJiSearchSubmit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
    <!-- 转交的弹框 -->
    <div class="transferForm">
        <el-dialog :visible.sync="dialogFormVisible2" width="40%">
        <el-form :model="transferForm">
            <el-form-item label="部门" :label-width="formLabelWidth">
            <el-select v-model="transferForm.title" placeholder="请选择" @change='zhuanJiao2'>
                <el-option v-for="item in this.department" :key="item.id" :label="item.title" :value='item.id'></el-option>
                <!-- <el-option label="心内科" value="1"></el-option>
                <el-option label="耳鼻喉科" value="2"></el-option> -->
            </el-select>
            </el-form-item>
            <el-form-item label="人员" :label-width="formLabelWidth">
            <el-select v-model="transferForm.realName" placeholder="请选择" @change='zhuanJiao3'>
                <el-option v-for="item in this.employee2" :key="item.id" :label="item.realName" :value="item.id"></el-option>
                <!-- <el-option label="网三" value="1"></el-option>
                <el-option label="啦啦啦" value="2"></el-option> -->
            </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible2 = false">取 消</el-button>
            <el-button type="primary" @click="zhuanJiaoSubmit()">确 定</el-button>
        </div>
        </el-dialog>
    </div>
    </div>
</template>
<script>
import {initPatientsTable,daoChu,PatientsTableDelete,initPatientsTableBuMen,initPatientsTableRenYuan,zhuanJiaoSub,initPatientsTableAdd,gaoJiSearchSubmit} from '../utils/api/patients'
export default {
// eslint-disable-next-line vue/multi-word-component-names
name:"",
components:{},
data(){
    return {
        search:'',
        // 表格渲染的模拟数据
        tableData: [],
        nowPage:1,//当前页
        maxPage:0,//最大页
        maxCount:0,//数据总条数
        obj:{
            limit:5,//每页显示几条数据
            page:1,//第几页
            types:null,
            status:null,
            username:null,
            customerPhoneNumber:null,
            customerCard:null,
            medicalInsurance:null,
            startTime:null,
            endTime:null,
            search:'',
            },
        typeSea:[],//公海、私海的存放数组
        status:[],//有效、无效的存放数组
        //高级搜索弹框
        dialogFormVisible: false,
        formLabelWidth: '120px',
        searchForm:{
            types:'公海',
            status:'有效',
            username:null,
            customerPhoneNumber:null,
            customerCard:null,
            medicalInsurance:null,
            startTime:null,
            endTime:null
        },
        //转交的弹框
        dialogFormVisible2:false,
        transferForm:{
            title:'',
            realName:''
        },
       department:[],
       employee2:[],
       multipleSelection: [],
       employeeId:''
    }
    },
    methods:{
        // 获取全部患者信息的函数
        getAllPatients(){
            initPatientsTable(this.obj).then((data)=>{
                console.log(data);
                this.tableData=data.data.data.customer;
                this.maxCount=data.data.data.count;
                this.maxPage=Math.ceil(data.data.data.count/this.obj.limit);
                // console.log(this.maxPage);
                
                this.nowPage=this.obj.page;
                // console.log(this.nowPage);
                //  if(this.nowPage>this.maxPage){
                //     this.nowPage=this.maxPage;
                //     this.obj.page=this.nowPage;
                // } 
            })
        },
          // 当前页改变时触发的函数，例如：当点击第二页时，当前页的页码变为2
        changePage(num){ 
            this.nowPage=num;
            this.obj.page=this.nowPage;
            
            // console.log(this.obj);
            this.getAllPatients()
        }, 

        // 点击导出按钮
        daochu(){
            daoChu().then((data)=>{
                console.log(data);
                this.download(data.data)
            })
        },
        // 将后台返回的乱码解析成文件下载
        download(data) {
        if (!data) {
        return;
        }
        let url = window.URL.createObjectURL(new Blob([data]));
        let link = document.createElement("a");
        link.style.display = "none";
        link.href = url;
        link.setAttribute("download", "患者信息报表.xlsx");

        document.body.appendChild(link);
        link.click();
        },

        // 点击新增按钮出现新增页面
        add(){
            this.$router.push('/home/patientsManagement/patientsManagementAdd');
        },
        // 点击修改按钮出现修改页面
        modify(data){
            // console.log(data.row);
            this.$router.push({path:'/home/patientsManagement/patientsManagementModify',query:{...data.row}})
        },
        // 点击开单按钮，跳到诊断管理得新增页面
        kaiDan(){
            this.$router.push('');
        },
        //删除的确认弹框
        open(data) {
            // console.log(data.row.id);
        this.$confirm('删除该记录将不能恢复，确定删除吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            let obj={
                id:data.row.id
            };
          PatientsTableDelete(obj).then((data)=>{
            //   console.log(data);
              if(data.data.code==200){
                if(this.tableData.length==1){
                    this.nowpage--
                    this.obj.page--
                }
                //  console.log(this.tableData);
                this.getAllPatients();
                this.$message({
                type: 'success',
                message: '删除成功!'
                 });
              }
          })
        }).catch(() => {
          this.getAllPatients();
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
        //转交的部门初始化
        zhuanJiao(){
            this.dialogFormVisible2 = true;
            initPatientsTableBuMen().then((data)=>{
                // console.log(data);
                this.department=data.data.data;
                console.log(this.department);
            })

        },
        //转交的人员初始化
        zhuanJiao2(value){
            console.log(value);
            this.deptId=value;
            this.transferForm.realName='';
            let obj={
                id:this.deptId
            };
            initPatientsTableRenYuan(obj).then((data)=>{
                // console.log(data);
                this.employee2=data.data.data;
                console.log(this.employee2);
        })
        },
        //获取选中人员的id
        zhuanJiao3(value2){
            // console.log(value2);
            this.employeeId=value2;
        },
        // 选中获取患者id
        handleSelectionChange(val) {
            for(let i = 0; i<val.length; i++){
               this.multipleSelection[i] = val[i].id;
            }
            // console.log(this.multipleSelection);
        },
        // 转交弹框的确认按钮，提交到后台
        zhuanJiaoSubmit(){
            let obj={
                customerId:this.multipleSelection,
                employeeId:this.employeeId,
            }
            zhuanJiaoSub(obj).then((data)=>{
                // console.log(data);
                if(data.data.code==200){
                    this.getAllPatients()
                }
            })
            this.dialogFormVisible2 = false;
        },
        // 点击高级搜索按钮，弹出高级搜索弹框
        gaoJiSearch(){
            this.dialogFormVisible = true;
            initPatientsTableAdd().then((data)=>{
                // console.log(data);
                this.typeSea=data.data.data.type;
                this.status=data.data.data.status;
                // console.log(this.typeSea,this.status);
            })
        },
        // 点高级搜索弹框中的确认按钮，把数据传到后台
        gaoJiSearchSubmit(){
            this.obj.types=this.searchForm.types,
            this.obj.status=this.searchForm.status,
            this.obj.username=this.searchForm.username,
            this.obj.customerPhoneNumber=this.searchForm.customerPhoneNumber,
            this.obj.customerCard=this.searchForm.customerCard,
            this.obj.medicalInsurance=this.searchForm.medicalInsurance,
            this.obj.startTime=this.searchForm.startTime,
            this.obj.endTime=this.searchForm.endTime
            console.log(this.obj);
            gaoJiSearchSubmit(this.obj).then((data)=>{
                console.log(data);
                if(data.data.code==200){
                    this.getAllPatients()
                }
            })
            this.dialogFormVisible = false;
        },
        // 点击模糊搜索的按钮，查询数据
        moHuSearch(){
            this.obj.search=this.search;
            gaoJiSearchSubmit(this.obj).then((data)=>{
                console.log(data);
                if(data.data.code==200){
                    this.getAllPatients()
                }
            })
        }
    },
    created(){
        this.getAllPatients()
    },
   
}
</script>
<style lang="less" scoped>
// html,body{
//     height: 100%;
// }
.main{
    background-color: white;
    margin-top: 20px;
    .nav{
        padding:0 0 20px 0;
        .btn{
            float: left;
        }
        .search{
            float: right;
            .el-input{
                width: 200px;
            }
        }
    }
    .pages{
        background-color: #FAFAFA;
        padding: 20px;
        .leftPage{
            float: left;
        }
        .rightPage{
            float: right;
        }
    }
}
// 高级搜索弹框的样式
.searchForm{
    .el-form-item{
    display: block;
    float: left;
    width: 50%;
    .el-select{
        width:80%
    }
    .el-input{
        width: 80%;
    }
    .el-col{
        width:80%;
    }
}
}
// 转交的弹框样式
.transferForm{
    .el-select{
        width:80%
    }
}
</style>